
import { connect } from 'react-redux';
import "./inter.scss"
import { getCookie } from './../../js/cookie';
import { getUserComment } from '../../action/action';
import { PullToRefresh } from 'antd-mobile';
@connect(
    state => {
        return {
            userCommentData: state.inform.userCommentData
        }
    }
)
export class Inter extends React.Component {
    state = {
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }
    componentDidMount() {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            dispatch(getUserComment(getCookie("ky_uid")))
        }
    }
    render() {
        let { userCommentData } = this.props;
        if (getCookie("ky_uid")) {
            if (userCommentData) {
                if (userCommentData.length !== 0) {
                    return (
                        <PullToRefresh
                            damping={60}
                            ref={el => this.ptr = el}
                            style={{
                                height: this.state.height,
                                overflow: 'auto',
                            }}
                            indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                            direction={this.state.down ? 'down' : 'up'}
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this.setState({ refreshing: true });
                                setTimeout(() => {
                                    location.reload()
                                    this.setState({ refreshing: false });
                                }, 1000);
                            }}
                        >
                            <div className="inter">
                                <ul>
                                    {
                                        userCommentData && userCommentData.map((item, index) => {
                                            return (
                                                <li key={index}>
                                                    <header className="cl">
                                                        <span>{item.utel}</span>
                                                        <span>{item.datetime}</span>
                                                    </header>
                                                    <main>
                                                        <p>{item.content}</p>
                                                    </main>
                                                </li>
                                            )
                                        })
                                    }
                                </ul>
                            </div>
                        </PullToRefresh>
                    )
                } else {
                    return (<div className="no-content">没有评论</div>)
                }
            } else {
                return (<div className="no-content">没有评论</div>)
            }
        } else {
            return (
                <div className="no-content">登录后,查看评论</div>
            )
        }
    }
}